<template>
  <div>
    <div class="header">
      <span>支付笔数</span> <i class="el-icon-warning"></i>
    </div>
    <div ref="myDiv" class="radar-echart"></div>
    <div class="end">转化率 1,234</div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import Radarcircle from "./radarcircle";
export default {
  name: "Radarcircle",
  mounted() {
    this.echarts = Echarts.init(this.$refs.myDiv);
    this.echarts.setOption(Radarcircle);
    this.initData();
  },
  methods: {
    initData() {
      setTimeout(() => {
        //resData是服务端返回的数据
        let resData = [
          {
            value: 320,
            name: "lndustries",
          },
          {
            value: 240,
            name: "Technology",
          },
          {
            value: 149,
            name: "Forex",
          },
          {
            value: 100,
            name: "Gold",
          },
          {
            value: 59,
            name: "Forecasts",
          },
        ];
        //重新绘制
        Radarcircle.series[0].data = resData;
        this.echarts.setOption(Radarcircle);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.radar-echart {
  width: 275px;
  height: 200px;
}
.header {
  position: relative;
  span {
    color: #97a8be;
    font-size: 14px;
  }
  .el-icon-warning {
    position: absolute;
    right: 1px;
    color: #97a8be;
    padding: 3px 0;
  }
}
.end {
  width: 275px;
  color: #303133;
  border-top: 1px solid #97a8be;
}
</style>
